import React from 'react';
import WelcomePage from '../page/WelcomePage';
import HomePage from '../page/HomePage';
import DetailPage from '../page/stack/DetailPage';
import SearchPage from '../page/stack/SearchPage';
import FetchDemoPage from '../page/stack/FetchDemoPage';
import InfoPage from '../page/stack/InfoPage';
import AsyncStorageDemoPage from '../page/stack/AsyncStorageDemoPage';
import DataStoreDemoPage from '../page/stack/DataStoreDemoPage';
import {NavigationContainer} from '@react-navigation/native';
import {createNativeStackNavigator} from '@react-navigation/native-stack';

const Stack = createNativeStackNavigator();
function MainStack() {
  return (
    <Stack.Navigator initialRouteName="Home">
      <Stack.Screen
        name="Home"
        options={{headerShown: false}}
        component={HomePage}
      />
      <Stack.Screen
        name="Detail"
        options={{headerShown: false}}
        component={DetailPage}
      />
      <Stack.Screen
        name="Search"
        options={{title: '搜索'}}
        component={SearchPage}
      />
      <Stack.Screen
        name="Info"
        options={{headerShown: false}}
        component={InfoPage}
      />
      <Stack.Screen name="FetchDemo" component={FetchDemoPage} />
      <Stack.Screen name="AsyncStorageDemo" component={AsyncStorageDemoPage} />
      <Stack.Screen name="DataStoreDemo" component={DataStoreDemoPage} />
    </Stack.Navigator>
  );
}

function RootStack() {
  return (
    <Stack.Navigator
      initialRouteName="Welcome"
      screenOptions={{headerShown: false}}>
      <Stack.Screen name="Welcome" component={WelcomePage} />
      <Stack.Screen name="Main" component={MainStack} />
    </Stack.Navigator>
  );
}

export default function AppNavigator() {
  return (
    <NavigationContainer>
      <RootStack />
    </NavigationContainer>
  );
}
